<template>
  <div>
    <div class="mask" @click="_hideLinkage"></div>
    <div class="clearfix linkage">
      <div class="province pickerWrapper">
        <mt-picker :slots="provinces" @change="onProvinceChange" value-key="title"></mt-picker>
      </div>
      <div class="city pickerWrapper">
        <mt-picker :slots="citys" @change="onCityChange" value-key="title"></mt-picker>
      </div>
      <div class="area pickerWrapper">
        <mt-picker :slots="areas" @change="onAreaChange" value-key="title"></mt-picker>
      </div>
    </div>
  </div>
</template>

<script>
  import base from '../baseurl'
  export default {
    data () {
      return {
        baseurl: base.BASE,
        provinceTemp: [],
        cityTemp: [],
        areaTemp: [],
        province: {
          name: '',
          id: ''
        },
        maskFlag: false,
        city: {
          name: '',
          id: ''
        },
        area: {
          name: '',
          id: ''
        },
        flag: 0 // 最开始省市区那三个picker会初始化调用change事件，但是此时没有省市区数据，因此会报错，
        // 所以以这个标识符来控制当时第一次初始化时调用change事件时直接return
      }
    },
    computed: {
      result () {
        return {
          name: this.province.title + ' ' + this.city.title + ' ' + this.area.title,
          provinceId: this.province.id,
          cityId: this.city.id,
          areaId: this.area.id
        }
      },
      provinces () {
        return [
          {
            flex: 1,
            values: this.provinceTemp,
            className: 'slot1',
            textAlign: 'center'
          }, {
            divider: true,
            content: '-',
            className: 'right'
          }
        ]
      },
      citys () {
        return [
          {
            flex: 1,
            values: this.cityTemp,
            className: 'slot1',
            textAlign: 'center'
          }, {
            divider: true,
            content: '-',
            className: 'slot2'
          }
        ]
      },
      areas () {
        return [
          {
            flex: 1,
            values: this.areaTemp,
            className: 'slot1',
            textAlign: 'center'
          }
        ]
      }
    },
    created () {
      this.$nextTick(() => {
        this._getProvince()
        this._getCity(2)
        this._getArea(52)
      })
    },
    methods: {
      _hideLinkage () {
        this.$emit('getLinkage', this.result) // 触发父组件的getLinkage事件接收结果数据
      },
      onProvinceChange (picker, values) {
        if (this.flag === 0) {
          return
        }
        let provinceIndex = picker.getSlotValue(0)
        this.province = provinceIndex
        let city = this._getCity(provinceIndex.id)
        console.log(city)
        this.citys[0].values = city
        this.city = city[0]
      },
      onCityChange (picker, values) {
        if (this.flag === 0) {
          return
        }
        let cityIndex = picker.getSlotValue(0)
        this.city = cityIndex
        let area = this._getArea(cityIndex.id)
        this.areas[0].values = area
        this.area = area[0]
      },
      onAreaChange (picker, values) {
        if (this.flag === 0) {
          this.flag = 1
          return
        }
        let areaIndex = picker.getSlotValue(0)
        this.area = areaIndex
      },
      // 得到省份数据
      _getProvince () {
        let _this = this
        $.post(_this.baseurl + 'lotterynew.php?lid=13&action=region', {
          pid: 1
        }, function (data) {
          _this.provinceTemp = []
          _.forEach(data, (item) => {
            _this.provinceTemp.push(item)
          })
        }, 'json')
        return _this.provinceTemp
      },
      // 根据省份得到城市数据
      _getCity (province) {
        let _this = this
        $.post(_this.baseurl + 'lotterynew.php?lid=13&action=region', {
          pid: province,
          region_type: 2
        }, function (data) {
          _this.cityTemp = []
          _.forEach(data, (item) => {
            _this.cityTemp.push(item)
          })
        }, 'json')
        return _this.cityTemp
      },
      // 根据城市得到区域数据
      _getArea (city) {
        let _this = this
        $.post(_this.baseurl + 'lotterynew.php?lid=13&action=region', {
          pid: city,
          region_type: 3
        }, function (data) {
          _this.areaTemp = []
          _.forEach(data, (item) => {
            _this.areaTemp.push(item)
          })
          if (_this.areaTemp.length === 0) { // 如果没有区域数据则第三个picker显示的内容
            _this.areaTemp.push({
              name: '没有',
              id: '000000'
            })
          }
        }, 'json')
        return _this.areaTemp
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .mask
  {
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:rgba(0, 0, 0, 0.5);
    z-index:11;
    }
  .linkage
  {
    position:fixed;
    bottom:0;
    width:100%;
    background:white;
    left:0;
    overflow:hidden;
    z-index:12;
    }
  .clearfix:after
  {content:".";display:block;height:0;clear:both;visibility:hidden}
  .pickerWrapper
  {
    width:33.3%;
    float:left;
    }


</style>